<template>
	<view class="container">
		<!-- 第一楼层 -->
		<view class="floor">
			<!-- 左侧分类列表 -->
			<scroll-view class="category-list" scroll-y>
				<view class="category-item" v-for="(item, idx) in list" :key="item.id"
					:class="['left-item', item.sid === activeIdx ? 'active' : '']" @click="selectLeft(item.sid)">
					{{ item.text }}
				</view>
			</scroll-view>

			<!-- 右侧疾病列表 -->
			<scroll-view class="disease-list" scroll-y>
				<view class="disease-item" v-for="right in rightList" :key="right.id">
					{{ right.title }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	const list = ref([])
	const currentChildrenList = ref([])
	const rightList = ref([])
	const activeIdx = ref(null)
	const listdata = async function() {
		try {
			// 获取 token 并打印调试信息
			const token = uni.getStorageSync('token')
			if (!token) {
				console.error('Token 为空，请检查登录状态')
				return
			}

			// 发起请求并打印完整响应信息
			const res = await new Promise(() => {

				uni.request({
					url: 'http://localhost:3010/query',
					header: {
						'Authorization': `Bearer ${token}`
					},
					method: "GET",
					success: (res) => {
						console.log(res, '555');
						// 先校验 res.data.data 是否存在，不存在给默认空数组
						const originData = res.data.data || [];
						list.value = originData.map(v => {
							return {
								text: v.subject,
								children: [],
								id: v.sid,
								sid: v.sid
							}
						});
						if (list.value.length > 0) {
							activeIdx.value = list.value[0].sid
							// 自动加载第一个的右侧数据
							getDisease(list.value[0].sid)
						}
					}
				})
			})


		} catch (err) {
			console.error('请求发生错误:', err)
		}
	}
	const selectLeft = async function(sid) {
		activeIdx.value = sid
		getDisease(sid)
	}
	const getDisease = async function(sid) {
		try {
			// 获取 token 并打印调试信息
			const token = uni.getStorageSync('token')
			if (!token) {
				console.error('Token 为空，请检查登录状态')
				return
			}
			console.log('当前传的 sid：', sid)
			// 发起请求并打印完整响应信息
			const res = await new Promise(() => {
				uni.request({
					url: 'http://localhost:3010/bible/queryFid',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': `Bearer ${token}`
					},
					method: "POST",
					success: (res) => {
						console.log(res.data.data, 222)
						// 同样校验 res.data.data，避免 undefined 进 map
						const diseaseData = res.data.data || [];
						rightList.value = diseaseData.map(v => ({
							title: v.Disease,
							id: v.did
						}));
					},
					data: {
						id: sid
					}
				})
			})


		} catch (err) {
			console.error('请求发生错误:', err)
		}
	}

	getDisease(activeIdx.value)
	listdata()
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		height: 100vh;
		box-sizing: border-box;
	}

	.floor {
		height: calc(100vh - 40rpx);
		background-color: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		display: flex;
	}

	.category-list {
		width: 46%;
		background-color: #a4ffc2;

		.category-item {
			padding: 24rpx 30rpx;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

			&.active {
				background-color: #f0fff5;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					height: 100%;
					width: 4rpx;
					background-color: #2c7a4d;
				}
			}
		}
	}

	.disease-list {
		width: 54%;
		background-color: #ffffff;

		.disease-item {
			padding: 24rpx 30rpx;
			font-size: 32rpx;
			border-bottom: 1rpx solid #f0f0f0;
		}
	}
</style>